import React, {Component} from 'react'
import {Table, Input, Select, Button, Divider, Radio, Modal, Layout} from 'antd';
import ResultTable from '../../component/Result_table';
import ResultTable1 from '../../../src/adminComponent/resultTable/ResultTable1'
import QueueAnim from 'rc-queue-anim';
// import $ from 'jquery';
import './Pro_Case_search.css';
import fetch from 'cross-fetch';
import ReactToPrint from 'react-to-print';

const {Header} = Layout;

// const url = 'http://192.168.1.137:8088';
const url = 'http://duodao.chende.top';

//企业名称选择框初始化
const Option = Select.Option;
const provinceData = ['北京','天津','上海','重庆','新疆','西藏','宁夏','内蒙古','广西','黑龙江','吉林','辽宁','河北','山东','江苏','安徽',
                      '浙江','福建','广东','海南','云南','贵州','四川','湖南','湖北','河南','山西','陕西','青海','江西','台湾','香港','澳门'];


//设计产能变量
const RadioGroup = Radio.Group;


class Pro_Case_search extends Component {
    constructor(props){
        super(props);
        this.state = {
            provinceValue:'',//省市
            qiYeMCValue: '',//企业名字
            sheJiCNValue: '',//设计产能
            shuLiaoRHValue: '',//熟料热耗
            paiFangZKValue: '',//排放状况
            // dataList: '',
            data: [],
            visible: false,
            resultData: []
        }
    }

    //企业名称方法
    onChangeQiYeMC = (e) => {
        this.setState({
            qiYeMCValue: e.target.value
        });
    }

    //企业名称选择器方法
    handleProvince = (value) => {
        this.setState({
            provinceValue: value
        })
    }
    
    //设计产能方法
    onChangesheJiCN = (e) => {
        this.setState({
          sheJiCNValue: e.target.value,
        });
      }
    
    //可比熟料热耗方法
    onChangeShuLiaoRH = (e) => {
        this.setState({
            shuLiaoRHValue: e.target.value,
          });
    }

    //排放状况方法
    onChangePaiFangZK = (e) => {
        this.setState({
            paiFangZKValue: e.target.value,
          });
    }

    //查询按钮方法
    handleSearchInfo = () => {
        //获取企业名称
        const qiYeMCValue = this.state.qiYeMCValue;
        //获取企业区域
        const provinceValue = this.state.provinceValue;
        //获取设计产能
        const sheJiCNValue = this.state.sheJiCNValue;
        //获取可比熟料热耗
        const shuLiaoRHValue =this.state.shuLiaoRHValue;
        //获取排放状况
        const paiFangZKValue = this.state.paiFangZKValue;
        let formData = new FormData();
            formData.append('comp_name',qiYeMCValue);
            formData.append('comp_address',provinceValue);
            formData.append('design_power',sheJiCNValue);
            formData.append('hot_consume',shuLiaoRHValue);
            formData.append('paifang',paiFangZKValue);
        fetch(url+'/questionnaires/diaoyan/query',{
            method : 'POST',
            body: formData,
        })
        .then((res) => {
            return res.json(); 
        }).then((res) => {
            console.log(res)
            const resData = res.data;
            this.setState({
                data: resData
            })
        }).catch(err => {
            console.log(err);
        })
    }

    // 初始化
    componentDidMount = () => {
        fetch(url+'/questionnaires/diaoyan/query', {
            method : 'GET',
        })
        .then(res => {
            return res.json();
        })
        .then(res => {
            console.log(res);
                this.setState({
                    data: res.data
                })
        })
    }
    //查看按钮
    showModal = (i) => {
        const item = this.state.data[i];
        this.setState({
            visible: true,
            resultData: item,
        })
    }
    //控制modal的显示与隐藏
    handleOk = () => {
        this.setState({
            visible: false,
        })
    }
    handleCancel = () => {
        this.setState({
            visible: false,
        })
    }

    render() {
        // 企业区域
        const children = [];
        for (let i = 0; i < provinceData.length; i++) {
        children.push(<Option key={provinceData[i]}>{provinceData[i]}</Option>);
        }
        // 表头
        const column = [
            {
                title: '企业名称',
                dataIndex: 'QYMC',
            },
            {
                title: '企业区域',
                dataIndex: 'QYQY',
            },
            {
                title: '设计产能',
                dataIndex: 'SJCN',
            },
            {
                title: '可比熟料热耗',
                dataIndex: 'KBSLRH',
            },
            {
                title: '排放状况',
                dataIndex: 'PFZK',
            },
            {
                title: '操作',
                dataIndex: 'CZ',
            },
        ]
        //表格数据填写
        const datas = [];
        const dataItem = this.state.data
        const len = dataItem.length;
        for(let i = 0; i < len; i++){
            datas.push({
                QYMC: dataItem[i].compname,
                QYQY: dataItem[i].compaddress,
                SJCN: dataItem[i].designchanneng,
                KBSLRH: dataItem[i].rehao,     
                PFZK: dataItem[i].zyxh_slsc_yl1_name,
                CZ: <span>
                     <Button type="primary" style = {{float:'left'}} onClick = {() => this.showModal(i)} >查看</Button>
                </span>
            })
        }
        
        return (
            <div className = 'pro_case_search' style = {{padding: 24, background: '#fff', height: '100%'}}>
            <Header style={{background: '#fff', padding: 0}}>
                    <div style = {{float: 'left'}}>
                        <a href = '/'><img src={require("../../img/logo-whut.png")}/></a>
                    </div>
            </Header>
            <div className = 'case_search' >
                <Divider orientation="left">查询条件</Divider>
                <div className = 'qiYeMC'>
                    企业名称:<Input type = 'primary' style = {{width:'256px',marginBottom: '10px',marginLeft:'10px'}} value = {this.state.qiYeMCValue} onChange = {this.onChangeQiYeMC} />
                </div>
                <div className = 'qiYeQY'>
                    企业区域:
                    省：<Select defaultValue = '' value = {this.state.provinceValue} onChange = {this.handleProvince} style = {{width: 100}}>
                            {children}
                        </Select>
                </div>
                <div className = 'sheJiCN'>
                    设计产能(t/d): <RadioGroup onChange={this.onChangesheJiCN} value={this.state.sheJiCNValue} style = {{marginBottom: '10px',marginLeft:'10px'}}>
                                        <Radio value={'小于2500'}>小于2500</Radio>
                                        <Radio value={'等于2500'}>等于2500</Radio>
                                        <Radio value={'2500到3000'}>2500到3000</Radio>
                                        <Radio value={'3000到4000(含3000)'}>3000到4000(含3000)</Radio>
                                        <Radio value={'4000到5000(含4000)'}>4000到5000(含4000)</Radio>
                                        <Radio value={'等于5000'}>等于5000</Radio>
                                        <Radio value={'大于5000'}>大于5000</Radio>
                                        </RadioGroup>

                </div>   
                <div className = 'shuLiaoRH'>
                    可比熟料热耗(kgce/tsh)：<RadioGroup onChange={this.onChangeShuLiaoRH} value={this.state.shuLiaoRHValue} style = {{marginBottom: '10px',marginLeft:'10px'}}>
                                            <Radio value={'小于等于103'}>小于等于103</Radio>
                                            <Radio value={'103到108(含108)'}>103到108(含108)</Radio>
                                            <Radio value={'108到112(含112)'}>108到112(含112)</Radio>
                                            <Radio value={'大于112'}>大于112</Radio>
                                        </RadioGroup>    
                </div>     
                <div className = 'paiFangZK'>
                    排放状况: <RadioGroup onChange={this.onChangePaiFangZK} value={this.state.paiFangZKValue} style = {{marginLeft:'10px'}}>
                                            <Radio value={'颗粒物(窑尾)'}>颗粒物(窑尾)</Radio>
                                            <Radio value={'SO2'}>SO2</Radio>
                                            <Radio value={'NOx'}>NOx</Radio>
                                        </RadioGroup>  
                </div>    
                <Divider orientation="right"><Button type="primary"  onClick = {this.handleSearchInfo}>查询</Button></Divider>
                <Table columns = {column} dataSource = {datas} id = 'table'
                        pagination = {{
                            showSizeChanger : true,
                            defaultCurrent : 1,
                            defaultPageSize: 2,
                            total: len,
                            pageSizeOptions : ['4', '10', '30', '50'],//页数选择
                        }}
                />
                <label><b>当前查询总数:{datas.length}</b></label>
                {/* 查看结果列表 */}
                <Modal
                title="问卷信息"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width = '100%'
                height = '100%'
                >
                    {/*<ResultTable data = {this.state.resultData} ref = {(el) => this.refs = el} />*/}
                    <ResultTable1 ref = {(el) => this.refs = el} />
                    <ReactToPrint 
                        trigger = {() => <a href="#"><Button type = 'primary' style = {{marginTop:10}} >打印</Button></a>}
                        content = {() => this.refs}
                    />
                    
                </Modal>
            </div>
        </div>
        );
    }
} 

export default Pro_Case_search;